<template>
  <Header :title="address" />
  <van-address-edit :area-list="areaList" show-postal show-delete show-set-default show-search-result
     :area-columns-placeholder="['请选择', '请选择', '请选择']" :address-info="addressInfo"
    @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />
</template>
<script>
import { computed, onMounted, reactive, toRefs } from 'vue'
import Header from '../../components/header.vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant';
export default {
  components: {
    Header,
  },
  setup() {
    const onSave = (content) => {
      if (route.query.type === "add") {
        store.commit('addaddress', content)
      } else {
        store.commit('editaddress', content)
      }
      showToast('保存成功');
      setTimeout(() => {
        router.back()
      }, 1000)
    }
    const onDelete = (content) => { 
      store.commit('deleteAddress', content)
      showToast('删除成功');
      setTimeout(() => {
        router.back()
      }, 1000)

    }
    const onChangeDetail = () => { }
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const address = computed(() => {
      return route.query.type === "add" ? "地址新增" : "地址编辑"
    })
    const init = () => {
      store.state.userAddress.forEach((item) => {
        if (item.id === Number(route.query.id)) {
          data.addressInfo = item
        }
      })
    }
    onMounted(() => {
      init()
    })
    const data = reactive({
      areaList: {
        province_list: {
          110000: "江西省",
          120000: "浙江省",
        },
        city_list: {
          110100: "南昌市",
          110200: "宜春市",
          120100: "杭州市",
          120200: "宁波市",
        },
        county_list: {
          110101: "南昌县",
          110202: "袁州区",
          120101: "西湖区",
          120202: "宁波区",
          130301: "上城区",
        },
      },
      addressInfo: {},
    })
    return {
      ...toRefs(data),
      onSave,
      onDelete,
      onChangeDetail,
      store,
      address
    }
  }
}
</script>